<template>
  <a-button type="primary" @click="openCreateSessionModal" style="margin-top: 10px">
    <template #icon>
      <IconPlus />
    </template>
  </a-button>
  <a-list>
    <a-list-item
      v-for="item in conversations"
      :key="item.id"
      class="conversation-item"
      :class="{ 'active-session': activeSession === item.id }"
      @click="goToChat(item)"
    >
      <a-avatar :style="{ backgroundColor: item.avatarColor }">{{ item.name[0] }}</a-avatar>
      <div class="list-item-content">
        <div class="title">{{ item.name }}</div>
        <div class="subtitle">{{ item.lastMessage }}</div>
      </div>
      <template v-if="isEditMode" #actions>
        <a-button type="text" @click.stop="openEditSessionModal(item)">编辑</a-button>
        <a-button type="text" @click.stop="deleteSession(item.id)">删除</a-button>
      </template>
    </a-list-item>
  </a-list>

  <!-- 新增会话模态框 -->
  <a-modal v-model:visible="isCreateSessionModalVisible" title="新增会话" @ok="createSession">
    <a-form>
      <a-form-item label="会话名称">
        <a-input v-model="newSessionName" placeholder="请输入会话名称" />
      </a-form-item>
      <a-form-item label="会话类型">
        <a-radio-group v-model="newSessionType">
          <a-radio value="personal">个人</a-radio>
          <a-radio value="group">群组</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否置顶">
        <a-switch v-model="newSessionSticky" />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 编辑会话模态框 -->
  <a-modal v-model:visible="isEditSessionModalVisible" title="编辑会话" @ok="saveEditSession">
    <a-form>
      <a-form-item label="会话名称">
        <a-input v-model="editSessionName" placeholder="请输入会话名称" />
      </a-form-item>
      <a-form-item label="会话类型">
        <a-radio-group v-model="editSessionType">
          <a-radio value="personal">个人</a-radio>
          <a-radio value="group">群组</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否置顶">
        <a-switch v-model="editSessionSticky" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { IconPlus } from '@arco-design/web-vue/es/icon'

export default {
  components: {
    IconPlus,
  },
  data() {
    return {
      conversations: this.loadConversations(),
      activeSession: null,
      isCreateSessionModalVisible: false,
      newSessionName: '',
      newSessionType: 'personal',
      newSessionSticky: false,
      isEditSessionModalVisible: false,
      editSessionId: null,
      editSessionName: '',
      editSessionType: 'personal',
      editSessionSticky: false,
    }
  },
  setup() {
    const store = useStore()
    const isEditMode = computed({
      get: () => store.state.isEditMode,
      set: (value) => {
        store.commit('setEditMode', value)
        localStorage.setItem('isEditMode', JSON.stringify(value))
      },
    })

    return {
      isEditMode,
    }
  },
  methods: {
    goToChat(item) {
      this.activeSession = item.id
      this.$router.push({
        name: item.type === 'personal' ? 'PersonalChat' : 'GroupChat',
        params: { id: item.id },
      })
    },
    openCreateSessionModal() {
      this.isCreateSessionModalVisible = true
    },
    createSession() {
      const newSession = {
        id: Date.now(), // 使用时间戳作为唯一ID
        name: this.newSessionName,
        type: this.newSessionType,
        avatarColor: this.newSessionType === 'group' ? '#3370ff' : '#00b42a',
        lastMessage: '暂无消息',
        sticky: this.newSessionSticky,
      }
      this.conversations.push(newSession)
      this.saveConversations()
      this.isCreateSessionModalVisible = false
      this.newSessionName = ''
      this.newSessionType = 'personal'
      this.newSessionSticky = false
    },
    openEditSessionModal(session) {
      this.editSessionId = session.id
      this.editSessionName = session.name
      this.editSessionType = session.type
      this.editSessionSticky = session.sticky
      this.isEditSessionModalVisible = true
    },
    saveEditSession() {
      const session = this.conversations.find((s) => s.id === this.editSessionId)
      if (session) {
        session.name = this.editSessionName
        session.type = this.editSessionType
        session.avatarColor = this.editSessionType === 'group' ? '#3370ff' : '#00b42a'
        session.sticky = this.editSessionSticky
        this.saveConversations()
      }
      this.isEditSessionModalVisible = false
    },
    deleteSession(id) {
      this.conversations = this.conversations.filter((s) => s.id !== id)
      this.saveConversations()
    },
    saveConversations() {
      localStorage.setItem('conversations', JSON.stringify(this.conversations))
    },
    loadConversations() {
      const savedConversations = localStorage.getItem('conversations')
      return savedConversations
        ? JSON.parse(savedConversations)
        : [
            {
              id: 1,
              name: '张三',
              avatarColor: '#1890ff',
              lastMessage: '你好',
              type: 'personal',
              sticky: false,
            },
            {
              id: 2,
              name: '群聊1',
              avatarColor: '#ff4d4f',
              lastMessage: '大家好',
              type: 'group',
              sticky: false,
            },
          ]
    },
  },
  mounted() {
    const savedEditMode = JSON.parse(localStorage.getItem('isEditMode') || 'false')
    this.isEditMode = savedEditMode
  },
}
</script>

<style scoped>
.conversation-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.list-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.subtitle {
  font-size: 14px;
  color: #888;
}

.active-session {
  background-color: #f5f5f5;
}
</style>
